/*
 * @Author: zhangweixin 
 * @Date: 2018-11-28 20:06:42 
 * @Last Modified by: zhangweixin
 * @Last Modified time: 2018-12-14 18:04:36
 */
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import style from './style.less';
console.log(style)
import classNames from 'classnames/bind';
const classMap = classNames.bind(style);

import NavTabBar from 'components/navTabBar/index.js';
// import Chrome from 'components/Chrome/index.js';

import avatorDefaultIcon from 'imgs/icon-avatar-default.png';
import arrowDefaultIcon from 'imgs/icon-arrow-default.png';
import orderPaymentIcon from 'imgs/icon-order-waitpay.png';
import orderSendingIcon from 'imgs/icon-order-shipping.png';
import orderReceiveIcon from 'imgs/icon-order-shipped.png';
import orderSuccessIcon from 'imgs/icon-order-success.png';

export default function render(){
  console.log(this.props)
  let noLoginStatus = false;
  const { userNavItemsLinkArr,orderTypeFilters } = this.state;
  let noLoginShadow = (
    <div className={style["no-login-shadow"]}>
      <div className={style["avator-default-box"]}>
        <img src={avatorDefaultIcon} alt="头像默认"/>
      </div>
      <div className={style["avator-default-text"]} onClick={this.onGoToLoginHandler}>请点击登录</div>
    </div>
  )
  let avatorActiveContainer = (
    <div className={style["avator-active-container"]}>
      <img src={avatorDefaultIcon} alt=""/>
      <div className={style["user-nickname"]}>dddd</div>
      <div className={style["user-phone"]}>2222</div>
    </div> 
  )
  let saleFilterItem = (item,index)=>{
    return (
      <div className={style["order-nav-item"]} key={"sale-type-"+index} onClick={this.onGoToOrderListHandler} data-ordertype={item.type}>
        <div className={style["order-nav-item-icon-box"]}>
          {item.type=="waitpay"?(<img src={orderPaymentIcon} alt=""/>):("")}
          {item.type=="shipping"?(<img src={orderSendingIcon} alt=""/>):("")}
          {item.type=="shipped"?(<img src={orderReceiveIcon} alt=""/>):("")}
          {item.type=="success"?(<img src={orderSuccessIcon} alt=""/>):("")}
        </div>
        <div className={style["order-nav-item-text"]}>{item.label}</div>
      </div>
    )
  }
  let orderNavContainer = (
    <div className={style["order-nav-container"]}>
      <div className={style["order-nav-top"]}>
        <div className={style["order-nav-title"]}>我的订单</div>
        <div className={style["order-nav-more"]} onClick={this.onGoToOrderListHandler} data-ordertype="all">
          <div className={style["order-nav-more-text"]}>全部订单</div>
          <img src={arrowDefaultIcon} alt="" className="icon-arrow-default"/>
        </div>
      </div>
      <div className={style["order-nav-items"]}>
        {orderTypeFilters.map((item,index)=>{
          return saleFilterItem(item,index)
        })}
      </div>
    </div>
  )
  let userNavItems = (
    <div className={style["user-nav-items"]}>
      {userNavItemsLinkArr.map((item,index)=>{
        return item.display?(
          <Link to={item.link} className={style["user-nav-item"]} key={"userNavItemsLink"+index}>
            <div className={style["user-nav-item-text"]}>{item.label}</div>
            <img src={arrowDefaultIcon} alt="" className="icon-arrow-default"/>
          </Link>
        ):""
      })}
      {/* 调用拨打电话的两种形式，a标签或者js动态 */}
      <a href="tel:4000585825" className={style["user-nav-item"]}>
        <div className={style["user-nav-item-text"]}>拨打客服电话</div>
        <img src={arrowDefaultIcon} alt="" className="icon-arrow-default"/>
      </a>
      {/* <div className={style["user-nav-item"]} onClick={this.onCallHandler}>
        <div className={style["user-nav-item-text"]}>拨打客服电话</div>
        <img src={arrowDefaultIcon} alt="" className="icon-arrow-default"/>
      </div> */}
    </div>
  )
  return (
    <div className={classMap("P-user-center")}>
      {noLoginStatus?noLoginShadow:(
        <div className={style["has-login-container"]}>
          {avatorActiveContainer}
          {orderNavContainer}
          {userNavItems}
        </div>
      )}
      <NavTabBar />
    </div>
  )
}

// const render = function(){

// }
// export default render;